Advanced CSS3 and HTML5

Introduction

This lesson explores two dimensions of advanced HTML5 and CSS3. One is creating slide shows, which are one of the most widely used elements of attractive, inviting Web pages. The other is integrating JavaScript widgets, which allow designers to implement JavaScript animation and interactivity without writing any JavaScript code.

JavaScript is the dominant language for client-side website scripts—scripts that run in browsers. You can use JavaScript to create animation (elements that move around a page). You can also use it to create interactivity (elements that respond to user actions, like a click or hovering with a mouse). JavaScript runs in any browser and on any operating system, so it's essential to modern, dynamic, inviting websites.

JavaScript is more difficult to learn than HTML or CSS, but that doesn't mean it's impossible. And after learning how it works in this lesson, you may want to sign up for a JavaScript class at the institution through which you enrolled in this course.

JavaScript-based objects take a lot of work to build, even for skilled coders. It isn't worth it for everyone who wants to use a slide show to learn enough JavaScript to build a slide-show template. Instead, individual coders or teams of JavaScript coders build templates for commonly used interactive objects, such as slide shows, menu bars, or pop-up tool tips that provide text descriptions for content when a mouse hovers over it.

Advanced HTML5 and CSS3 coders use JavaScript widgets. These sets of files include JavaScript, HTML, and CSS files. You can customize the content of the widget by editing the HTML, and you can customize the look and feel of the widget by editing the CSS. It is not necessary, expected, or generally a good idea to try to edit the JavaScript itself when you're using a widget.

We'll return to how JavaScript relates to jQuery in the next chapter, but in brief: jQuery is a set of prepackaged JavaScript codes that scripters use to build widgets. A team maintains and distributes the jQuery library from jquery.com. A larger community of JavaScript coders takes advantage of jQuery to build widgets more efficiently.

Where do designers fit into this picture? We're the consumers, so to speak. We use widgets that JavaScript coders have built, and we customize their content with HTML and CSS.

Please join me in Chapter 2, where we'll talk about how you can use scripts in general and JavaScript in particular.

How Designers Use Scripts

Let's step back and examine the role of scripts in general, not just JavaScript. Scripts are short programs in languages like PHP or JavaScript. We saw an example of PHP scripting in Lesson 7, when we generated a PHP script and used it to handle data in a form.

Let's review what you learned from that experience:

• We didn't write PHP code; we generated it from a helpful, free online resource (TheSiteWizard.com).
• We saved the generated PHP file on our server.
• We linked our form to that PHP script.
• We customized the "front end" of the form with HTML5 form elements and properties (like validation and placeholder text).
• We further customized the look and feel of the form by defining CSS selectors for the form elements.

I think it's helpful to review that process because, as you wield HTML5 and CSS3 in complex sites, you're going to interact with scripting. There's no need to mystify that process: Someone creates the script, you link to it, you follow the documentation that comes with the script, and you alter the HTML and CSS to make it do what you want and to make it blend into your site.

Here's another generalization we can make about connecting with scripts: They come in packages that include HTML and CSS. Remember, the PHP script we got from TheSiteWizard back in Lesson 7 came with HTML that we had to copy and paste into our page to create a form that meshed with the PHP script.

Many times, the package of script plus HTML (and sometimes CSS as well) is called a widget. Widgets, in other words, can be sets of script, HTML, and CSS.

The Role of JavaScript

JavaScript is a language that programmers use to create animation and interactivity in Web pages. As I noted in the introduction, JavaScript is a client-side scripting language. That means the JavaScript runs on a user's computer, not on a server. In contrast, PHP, Ruby, Ruby on Rails, Perl, and other scripting runs on servers.

By the way, JavaScript is actually unrelated to the Java programming language. Someone thought it would improve the "branding" of this language to associate it with Java, and that's how JavaScript got its name.

As the HTML5 and CSS3 design community grows and matures, more JavaScript content is available in easy-to-use widgets.

The World of JavaScript Interactivity and Animation

Let's quickly look at some design elements that people often use JavaScript for:

• Accordion widgets: These expand or contract vertically. Mobile sites often use them because they store a lot of information without taking up much space, but you can also use them for all kinds of purposes. I often see them in online quizzes, where the quiz-taker can expand the question to see an answer or a hint.

An accordion widget

• Menu widgets: These create horizontal or vertical menu bars for navigation within a site or outside of a site.

A vertical menu bar

• Tabs: You can create a set of tabs across the top of a page. They hide parts of the page, and a user clicks each tab to display each part.

Tabs

In the Supplementary Material for this lesson, I'll provide you with links to grab the code for these and other JavaScript-based widgets.

What Is jQuery?

jQuery is essentially a set of packaged chunks of JavaScript code that allow JavaScript developers to write less code. jQuery works in all browsers, even Internet Explorer 6. And it works with older versions of HTML as well as with HTML5. You can find the jQuery JavaScript code at jquery.com.

jQuery widgets generally require at least three JavaScript scripts:

• A link to the main jQuery script—the one that has all the code that makes every jQuery widget work.
• A link to a specific jQuery script—one that makes that specific widget work.
• Additional scripting that goes in your <head> element to configure the script.

For example, the jQuery widget I used to create the tab panel we just looked at has these script elements. They go in the <head> tag of an HTML page:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script> $(function() {  $( "#tabs" ).tabs();  });  </script>

The first line links to the main jQuery script. The second <script> element links to a specific jQuery module that makes the tab widget work. And the third script isn't a link; it's a bit of JavaScript that has to go inside the page itself to make the widget work.

How Do You Use jQuery Widgets?

Now that you're getting a sense of how easy it is to implement jQuery widgets, you may be asking yourself, "How do I use these things?"

The answer is a four-step process:

1. Find a jQuery widget that fulfils your design need.
2. Copy the HTML that the widget distributor provides.
3. Customize the HTML, so you can use your own content with the widget.
4. Customize the CSS to integrate the widget into your own site, matching colors, fonts, and other elements.

Designers don't edit the centrally distributed jQuery code. That code resides permanently at the jquery.com site. And usually the JavaScript in jQuery widgets doesn't require editing either. Designers customize jQuery widgets by editing the HTML, and sometimes CSS, that comes with jQuery widgets.

Let's move on to Chapter 3, where I'll introduce you to some JavaScript slide shows.

Surveying JavaScript and jQuery Slide Shows

A whole range of JavaScript slide shows is available online. I'll share links to a few of my favorites in the Supplementary Material, and you can find more by searching for "javascript slide shows."

Some of the widgets you'll find cost money to download and use. Others are free. Guess which kind we're going to explore here? If you said free, you guessed right.

Many valuable jQuery widgets sell for under $100. (Most of those have licenses for one-site usage.) I'll provide information on commercial distribution of jQuery widgets in the Supplementary Material section.

There are times and places for slide shows that jump off the screen. These slide shows often include dramatic transitions from slide to slide, sound effects, and more. At other times, it's more appropriate to use a modest template that blends gracefully with your page.

Let's check out a couple examples of online, free, JavaScript slide show templates.

The first is the Wow Slider. This is a popular JavaScript-based slide show generator. It's not free, but we can look at it for free. Go to http://wowslider.com/demo.html to see examples of the kinds of slide shows you can generate with the Wow Slider application.

Testing the Wow Slider

Next let's jump over to a more subtle example—slidesjs, at http://slidesjs.com. This template is simpler, with minimalist effects and navigation.

Testing the slidesjs slide show example

While the SlidesJS template is simple, it works well, and once you know how to install it, you can install any other JavaScript slide show. In fact, you can use the technique for downloading and customizing the SlidesJS widget on any jQuery widget, from tabbed panels to menu bars.

Downloading a Basic jQuery Slide Show Template

To use and customize the SlidesJS widget, we'll download it, save it to the site we're using for all our class site content, and then customize it with our own pictures and styling.

To download the widget, follow these steps:

1. Go to http://www.slidesjs.com.
2. Click Download.

Downloading files for the
slidesjs slide show

3. Copy the downloaded Zip file into the root folder for your class site, and expand it. Doing this creates two subfolders inside the folder Slides-SlidesJS-3—examples and source—along with a "readme" file that includes documentation. (Note: Windows users may see one or more additional files that have a dot in front of the filename. You can ignore those files.)

Extracting folders for the
slidesjs slide show

4. Using your operating system's file manager (Windows Explorer or Finder), navigate to the standard folder, and locate the index.html file.

Testing the downloaded slide show

5. Open the file index.html in your browser.

Testing the downloaded sample slide show

Did it work? If not, please ask me about it in the Discussion Area. I'm always glad to help you.

Customizing and Adding Slides

Obviously designers want to replace the placeholder images that come with the SlidesJS widget!

You can do that by saving your own images to the img folder that's within the standard folder. But to avoid corrupting the JavaScript that makes the SlidesJS widget work, rename your images to match the filenames in the jQuery widget template. In this case, those filenames are: example-slide-1.jpg, example-slide-2.jpg, example-slide-3.jpg, and example-slide-4.jpg.

Customizing images for the slide show

Periodically refresh your browser to see how the images look.

Here are a few tips:

• Keep all your images the same size. They don't have to be the size of the placeholder images that came with the SlidesJS template, but they should all be the same height and width. This isn't a technical requirement to make the slide show work, but slide shows are generally more inviting and aesthetically less cluttered-looking if the images are the same size.
• You aren't limited to four images. Feel free to add more images to the img folder, but keep the filename system consistent (so the fifth image should have the name example-slide-5.jpg, and so on). But until we edit the HTML for the page, you'll see the first four images only.
• Test the two navigation tools – the "<" and ">" arrows on the left and the circles on the right.
• Don't worry yet about customizing the rest of the page content. We'll do that shortly.
• Feel free to use your own photos if you like! I did in the example above. Or you can use the flower images I've supplied for you in the link below.

If you need some images, you can download these.

Download Images Here

Customizing CSS

Now that we've customized the images in the slide show, let's apply our own custom style sheet to the file. To do that, follow these steps:

1. Open the index.html page for the standard slide show (the file we've been testing) in your code editor.
2. Enter this code right before the close </head> tag:

<link href="../../../style.css" rel="stylesheet" type="text/css">

3. Save the index.html file.
4. We haven't applied a lot of customizing that will reveal our own custom styling yet, but you can save the page and test it in a browser to see if any of your styles show up yet.

By the way, the three sets of "../" before our style sheet name tell a browser to look three levels up in the site's folder structure for the linked style sheet.

We placed our style sheet link at the end of the list so that our styles will "trump" (override) any earlier styling in the style sheets we linked to in the sample.

Customizing HTML

With our CSS file attached to the slide show HTML page, we can customize the page's content.

1. Customize the page title by entering your own text in place of the placeholder text. For example:

<title>Watch our slide show!</title>

2. Right after the open <body> tag, enter:

<div id="wrapper">
	<div id="banner">
	<h1>Check out our slide show!</h1>
	</div>

3. Just before the close </body> tag, close the wrapper div by entering:

</div>

4. The style sheet for the template comes with a .container class style that overrides our #wrapper ID style. Delete the open div tag:

<div class="container">

5. Delete the close </div> tag that goes with the .container class style. You'll see that close </div> tag just before this comment: <!-- End SlidesJS Required: Start Slides -->
   Deleting the open div tag, and the close div tag deletes the .container class style.

Adding Images

Did you copy more than four images into the img folder? If so, let's fix the code so that those additional images become visible.

1. Find the section of the HTML that begins with the comment: <!-- The container allows you to define the width of the slide show -->
2. Scroll to the end of the list of images, and add an image link. For example:

<img src="img/example-slide-5.jpg" alt="Photo by me!">

You can also add <img> elements like the one above but with sequentially higher numbers for the slides ("img/example-slide-6.jpg," "img/example-slide-7.jpg," and so on).

Again, you can use your own photos here if you wish. I did in the example below. Or you can use the flower images I supplied for download earlier in this chapter.

<!-- SlidesJS Required: Start Slides -->
    <div id="slides">
      <img src="img/example-slide-1.jpg" alt="Photo by: DK">
       <img src="img/example-slide-2.jpg" alt="Photo by me!">
       <img src="img/example-slide-3.jpg" alt="Photo by me!">
       <img src="img/example-slide-4.jpg" alt="Photo by me!">
       <img src="img/example-slide-5.jpg" alt="Photo by me!">
      <a href="#" class="slidesjs-previous slidesjs-navigation"><i class="icon-chevron-left icon-large"></i></a>
      <a href="#" class="slidesjs-next slidesjs-navigation"><i class="icon-chevron-right icon-large"></i></a>
  </div>
  <!-- End SlidesJS Required: Start Slides -->

Lesson 10: Building Slide Shows With jQuery, HTML, and CSS, transcript

Chapter 3, Video 1: "Customizing a Slide Show"

This is your instructor, David Karlins, and in this video I'm going to review some of what we did in Lesson 10, Chapter 3 to customize the slide show that we downloaded from SlidesJS.

Now this is a JavaScript widget, and typical of JavaScript widgets, there's editable HTML in it that allows us to customize the widget—in this case, to customize the slides that appear in the slide show, at least. So I followed all the steps in the lesson. I downloaded the images into my root folder, into an "img" subfolder.

However, instead of replacing the original images, I thought it would be more effective for this video if I create a second "img" folder that holds my images. And I'll leave the placeholder images in the original "img" folder. So I'm going to save this. And I'll add some alt text, like "Photo by DK." I'll save this.

Now when go I look at it in a browser, before I customized it, of course, I just had the placeholder images. But with it customized, I now see my own image first. All that's left is to replace the remaining images in the same way.

end transcript

Take a break if you need to, and then let's discuss how to make the slide show blend in to your website.

<nav>
<h2>Links: 
<a href="../../../index.html"> Home </a>|
<a href="../../../feedback.html"> Feedback </a> |
</h2>
</nav>

<footer>
  <h4>Slide show created by [your nickname]</h4>
  </footer>

<a href="img/example-slide-1.jpg" target="_blank" title="click to open a full-sized image in a new browser window or tab">
<img src="img/example-slide-1.jpg" alt="Photo by: [your nickname]">
</a>

a:link, a:visited {
    color: #d22929;
    text-decoration: none;
    font-weight: 600;
}

a:link, a:visited {
    color: blue;
    text-decoration: none;
    font-weight: 600;
}

a:hover, a:active {
    color: #9e2020;
    text-decoration: none;
    font-weight: 600;
}

a:hover, a:active {
    color: purple;
    text-decoration: underline;
}